﻿<template>
    <div class="h100 df fd-c" ref="box1">
        <el-card class="other">
            <div class="df">
                <el-button type="warning" @click="save">返回</el-button>
                <el-button type="primary" @click="testAjvGet">测试ajv校验参数get</el-button>
                <el-button type="primary" @click="testAjvPost">测试ajv校验参数post</el-button>
                <el-button type="success" @click="testAjvParams">测试ajv校验参数params</el-button>
            </div>
        </el-card>

        <el-card class="f-1 f-m-10">
            <BaseTable
                :list="list"
                :pageNum="pageNum"
                :pageSize="pageSize"
                :total="total"
                @search="searchHandle"
                @reset="resetHandle"
                @pageSizeChange="pageSizeChange"
                @pageNumChange="pageNumChange"
            >
                ">
                <template #search>
                    <el-form-item label="用户姓名">
                        <el-input v-model="form.name" placeholder="请输入" />
                    </el-form-item>
                    <el-form-item label="用户姓名">
                        <el-input v-model="form.name" placeholder="请输入" />
                    </el-form-item>
                    <el-form-item label="用户姓名">
                        <el-input v-model="form.name" placeholder="请输入" />
                    </el-form-item>
                </template>

                <template #table>
                    <el-table-column label="序号" width="70" align="center">
                        <template #="scope">
                            {{ (pageNum - 1) * pageSize + (scope.$index + 1) }}
                        </template>
                    </el-table-column>
                    <el-table-column prop="id" label="id" width="180" />
                    <el-table-column prop="contractName" label="contractName" width="180" />
                    <el-table-column prop="contractNumber" label="contractNumber" />
                    <el-table-column prop="originatorName" label="originatorName" />
                    <el-table-column prop="updatedDate" label="updatedDate" />
                    <el-table-column prop="recipients" label="recipients" />
                </template>
            </BaseTable>
        </el-card>
    </div>
</template>

<script setup lang="ts">
import BaseTable from '@/components/pc/BaseTable.vue';
import { onMounted, reactive, ref, useTemplateRef } from 'vue';
import api from '@/apis/demo';
import { usePage } from '@/hooks/usePage';
import { useRouter } from 'vue-router';
const router = useRouter();

const form = reactive({
    name: '',
    age: '',
    sex: '',
    value: '',
    EndTime: '2025-09-28',
    KeyWord: '',
});
const list = ref([]);

const getList = async () => {
    let json = {
        pageIndex: pageNum.value,
        pageSize: pageSize.value,
        name: form.name,
    };
    const res = await api.getUserList(json);

    if (!res || res.code != 1) return;
    const { list: data, total: num } = res.data;

    list.value = data;
    total.value = num;
};

const { total, pageNum, pageSize, pageNumChange, pageSizeChange } = usePage(getList);

const searchHandle = () => {
    getList();
};

const resetHandle = () => {
    console.log('reset');
};

onMounted(() => {
    getList();
});
const el = useTemplateRef('box1');
const save = async () => {
    // const result = await snapdom(<Element>el.value);
    // result.download();
};

const testAjvGet = () => {
    const json = {
       id:12
    };
    api.getList(json).then(res => {
        console.log(res);
    });
};

const testAjvPost = () => {
    const json = {
        name: '123',
        age: 12,
    };
    api.getListPost(json).then(res => {
        console.log(res);
    });
};

const testAjvParams = () => {
    const json = {
        id: 12,
    };
    api.getListParams(json).then(res => {
        console.log(res);
    });
};
</script>

<style scoped lang="scss">
.other {
    height: 200px;
    background-color: #bbb;
}

:deep(.el-card__body) {
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
    padding-bottom: 0;
}
</style>
